<template>
    <view class="life-tips-main">
        <header-vue title="生活小贴士" bgColor="transparent" :back="true"></header-vue>

        <view class="box-con">
            <view class="title">{{ detail.title || '' }}</view>
            <u-parse :content="detail.content || ''" :tagStyle="style"></u-parse>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import { getCommunitynewsLifetipDetail } from '@/api/index.js'
export default {
    components: {
        headerVue,
    },
    data() {
        return {
            detail:{},
            tipId: null,
            style: {
                p: 'font-size: 28rpx;color: #333333'
            }
        }
    },
    onLoad(option) {
        this.tipId = option.id || null
        this.getCommunitynewsLifetipDetailEvent(this.tipId)
    },
    methods: {
        async getCommunitynewsLifetipDetailEvent(id) {
            if (id === null) return;
            const res = await getCommunitynewsLifetipDetail({id})
            this.detail = (res && res.data) ? res.data : {}
        }
    }
}
</script>
<style lang="scss" scoped>
.life-tips-main {
    width: 100%;
    min-height: 100vh;
    background:linear-gradient( 180deg, #e6f0ff 0%, #feffff 100%);

    .box-con {
        padding: 0 32rpx;

        .title {
            font-size: 32rpx;
            color: #222222;
            font-weight: bold;
            padding: 28rpx;
            box-sizing: border-box;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.06);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            margin: 28rpx 0;
        }
    }
}
</style>